.OpenIcon {
  color: var(--fgColor-open);
}

.MergedIcon {
  color: var(--fgColor-done);
}

.StoryContainer {
  display: flex;
  flex-direction: column;
  gap: var(--base-size-16);
}

.StoryTitle {
  margin: 0;
  font-size: var(--text-title-size-medium);
  font-weight: var(--base-text-weight-semibold);
}

.StoryDescription {
  margin: 0;
  color: var(--fgColor-muted);
}

.WideButton {
  width: 200px;
}

.WideButton:where([data-component='buttonContent']) {
  justify-content: start;
}

.HiddenSelection:where([data-component='ActionList.Selection']) {
  display: none;
}

.NormalFontWeight:where([data-component='text']) {
  font-weight: var(--base-text-weight-normal);
}

.TextMuted {
  color: var(--fgColor-muted);
}

.FilterButtons {
  display: flex;
  margin-top: var(--base-size-4);
}

.ContentBox {
  padding: var(--base-size-12);
}

.FooterBox {
  padding: var(--base-size-8);
  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
  flex-shrink: 0;
}

.DemoContainer {
  display: flex;
  flex-direction: column;
  gap: var(--base-size-16);
  padding: var(--base-size-16);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
}

.TransitionBox {
  transition:
    max-height 100ms ease-out,
    opacity 100ms ease-out;
}

.TransitionBoxVisible {
  opacity: 1;
  max-height: 100px;
  overflow: visible;
}

.TransitionBoxHidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.FormControl {
  margin-bottom: var(--base-size-8);
}

.ButtonContentStartJustify [data-component='buttonContent'] {
  justify-content: start;
}

.HideActionListSelection [data-component='ActionList.Selection'] {
  display: none;
}
